@import "../variable";
@import "../func";
@import "../mixin";


@supports (display: flex) {
  .flex {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    [class^=col-]{
      float: initial;
    }
  }
}

.flex {
  &,
  &-col,
  &-row,
  &-center,
  &-col-between,
  &-row-between,
  &-row-reverse,
  &-col-reverse {
    display: flex;
  }

  &-row,
  &-row-between {
    flex-direction: row;
  }
  &-row-reverse {
    flex-direction: row-reverse;
  }
  &-row-between {
    justify-content: space-between;
  }

  &-col,
  &-col-between {
    flex-direction: column;
  }
  &-col-reverse {
    flex-direction: column-reverse;
  }
  &-col-between {
    align-content: space-between;
  }
  
  &-align-start {
    align-items: start;
  }

  &-align-center {
    align-items: center;
  }

  &-align-end {
    align-items: end;
  }

  &-justify-start {
    justify-content: start;
  }

  &-justify-center {
    justify-content: center;
  }

  &-justify-end {
    justify-content: end;
  }

  &-center {
    align-items: center;
    justify-content: center;
  }

  .loop-span(24);
}


.loop-span(@n, @i: 1) when (@i =< @n) {
  &.xx-@{i} {
    flex: @i;
    width: (floor((@i * 1000000 / @n)) / 10000) * 1%;
  }
  
  .loop-span(@n, (@i + 1));
}